<!--The content below is only a placeholder and can be replaced.-->
<div>
  <span class="button" (click)="show('DatePipe')">日期管道：DatePipe</span><br>
  <span class="button" (click)="show('JsonPipe')">Json管道：JsonPipe</span><br>
  <span class="button" (click)="show('CasePipe')">大写管道：UpperCasePipe、小写管道：LowerCasePipe、标题管道：TitleCasePipe</span><br>
  <span class="button" (click)="show('Number')">数值管道：DecimalPipe、货币管道：CurrencyPipe、百分比管道：PercentPipe</span><br>
  <span class="button" (click)="show('SlicePipe')">分割管道：SlicePipe</span>
</div>
<div *ngIf="showContent === 'DatePipe'" class="content">
  <span class="title">DatePipe:日期管道，纯管道，日期格式化</span>
  <br>
  <br>
  <label>正常：</label>
  <span>{{myDataDate }}</span>
  <br>
  <label>无管道参数：</label>
  <span>{{myDataDate | date }}</span>
  <br>
  <label>MM/dd/yy：</label>
  <span>{{myDataDate | date:"MM/dd/yy" }}</span>
  <br>
  <label>yyyy-MM：</label>
  <span>{{myDataDate | date:"yyyy-MM" }}</span>
  <br>
  <label>short：</label>
  <span>{{myDataDate | date:'short' }}</span>
  <br>
  <label>fullDate：</label>
  <span>{{myDataDate | date:'fullDate' }}</span>
  <br>
  <label>longDate：</label>
  <span>{{myDataDate | date:'longDate' }}</span>
  <br>
  <label>mediumDate：</label>
  <span>{{myDataDate | date:'mediumDate' }}</span>
  <br>
  <label>shortDate：</label>
  <span>{{myDataDate | date:'shortDate' }}</span>
  <br>
  <label>mediumTime：</label>
  <span>{{myDataDate | date:'mediumTime' }}</span>
  <br>
  <label>shortTime：</label>
  <span>{{myDataDate | date:'shortTime' }}</span>
  <br>
</div>
<div *ngIf="showContent === 'JsonPipe'" class="content">
  <span class="title">JsonPipe:Json管道，非纯管道，使用JSON.stringify()将对象转成json字符串</span>
  <br>
  <br>
  <label>正常：</label>
  <span>{{myJson }}</span>
  <br>
  <label>加管道：</label>
  <span>{{myJson | json}}</span>
  <br>
  <label>不存在传参</label>
  <br>
</div>
<div *ngIf="showContent === 'CasePipe'" class="content">
  <span class="title">UpperCasePipe:大写管道，纯管道，将文本中的字母全部转成大写</span>
  <span class="title">LowerCasePipe:小写管道，纯管道，将文本中的字母全部转成大写</span>
  <span class="title">TitleCasePipe:标题管道，将文本转换成标题格式</span>
  <br>
  <br>
  <label>正常：</label>
  <span>{{myString }}</span>
  <br>
  <label>加大写管道：</label>
  <span>{{myString | uppercase}}</span>
  <br>
  <label>加小写管道：</label>
  <span>{{myString | lowercase}}</span>
  <br>
  <label>加标题管道：</label>
  <span>{{myString | titlecase}}</span>
  <br>
</div>
<div *ngIf="showContent === 'Number'" class="content">
  <span class="title">DecimalPipe:数值管道，纯管道，数值格式化</span>
  <br>
  <span class="title">CurrencyPipe:货币管道，纯管道，货币格式化</span>
  <br>
  <span class="title">PercentPipe:百分比管道，百分比格式化</span>
  <br>
  <br>
  <br>
  <label>正常：</label>
  <span>{{myNumber }}</span>
  <br>
  <!--将数值按特定的格式显示文本，DecimalPipe管道用于对数值的整数与小数部分按照指定规则进行格式化，这种格式化方式也成为本地格式化处理-->
  <label>加数值管道：</label>
  <span>{{myNumber | number}}</span>
  <br>
  <!--
    {{expression | number[: digiInfo] }}
    digiInfo格式:
          {minIntegerDigits}           .{minFractionDigits}          -{maxFractionDigits}
      即：整数位保留最小位数（不足用零补）.小数位保留最小位数（不足用零补）-小数位最大保留位置
      默认值: 1.0-3
      即：number:'1.0-3'
  -->
  <label>数值管道加参数：'1.0-5'</label>
  <span>{{myNumber | number:'1.0-5'}}</span>
  <br><br>
  <!--
    将数值转换成货币形式，将数值进行货币格式化处理
  -->
  <label>加货币管道：</label>
  <span>{{myNumber | currency}}</span>
  <br>
  <!--
    语法：{{expression | currency[: currencyCode[: symbolDisplay[: digiInfo]]] }}
    currencyCod是指货币代码
  -->
  <label>货币管道加参数：'CAD'</label>
  <span>{{myNumber | currency:'CAD'}}</span>
  <br>
  <label>货币管道加参数：'CAD':'code'</label>
  <span>{{myNumber | currency:'CAD':'code'}}</span>
  <br>
  <label>货币管道加参数：'CAD':'symbol':'4.2-2'</label>
  <span>{{myNumber | currency:'CAD':'symbol':'4.2-2'}}</span>
  <br>
  <!--
    将数值转换成百分比格式，PercentPipe管道可以对数值进行百分比处理
    语法：{{expression | percent[: digiInfo] }}
  -->
  <label>加百分比管道：</label>
  <span>{{myNumber | percent}}</span>
  <br>
  <label>百分比管道加参数'1.5-7'</label>
  <span>{{myNumber | percent:'1.5-7'}}</span>
  <br>
</div>
<div *ngIf="showContent === 'SlicePipe'" class="content">
  <span class="title">SlicePipe:分割管道，非纯管道，用于裁剪数组或者字符串</span>
  <br>
  <!--
    将数组或者字符串裁剪成新子集，SlicePipe管道用于裁剪数组或字符串，返回裁剪后的目标子集。
    语法：{{expression | slice: start [: end] }}
    expression 可以是一个字符串或数组。字符串时，该管道调用String.prototype.slice()方法截取子串。如果是数组，调用Array.prototype.slice()方法取数组子元素。
    start:开始截取的位置
    end:结束截取的位置
    如果传入的数为负数，则应该是负数加上字符串的长度或者数组的长度得到的结果再进行计算
  -->
  <label>分割管道：数组:正常</label>
    <span *ngFor="let i of myArray">{{i}}</span>
  <br>
  <label>分割管道：数组:['a', 'b', 'c', 'd']</label>
    <span *ngFor="let i of myArray | slice:1:3">{{i}}</span>
  <br>
  <label>分割管道：字符串:'abcdefghij':正常</label>
  <span>{{myText}}</span>
  <br>
  <label>分割管道：字符串:'abcdefghij',myText | slice:0:4</label>
  <span>{{myText | slice:0:4}}</span>
  <br>
</div>
